import { useState } from 'react'
import { useMount } from 'ahooks'
import { useNavigate } from 'react-router-dom'
import { LogoutOutlined } from '@ant-design/icons'
import { Avatar, Button, Dropdown, Tooltip } from "antd"

import { ColorCallBack } from '../../Utils'
import { GetIndexedDB } from '../../Utils/IndexedDB'
import { themeStore, pageStore, modelStore, drawerStore } from '../../Config/zustand'
import { UserAvatar } from '../../Config/theme'
import { MappingData } from '../../Config/MappingData'


const PageMapping = {
    Workbenches: { key: 'Workbenches', label: '工作台', url: 'Workbenches', type: 'diy', icon: 'RobotOutlined' }
}


const HeadTemplate = ({ AdminEvent }) => {
    const imageUrl = sessionStorage.getItem('IMAGE')
    const { head, theme, logo } = themeStore()
    const { updateDrawer } = drawerStore()
    const { pageList, updateActive, updateList } = pageStore()
    const { updateModel } = modelStore()
    const [UserInfo, setUserInfo] = useState({})
    const [startStutas, setStartStutas] = useState(false)
    const [UserAdd, setUserAdd] = useState()

    const onNavigate = useNavigate()

    const { template } = theme
    const { switchUrl, logoMargin, logoShadowX, logoShadowY, logoShadowS, logoShadowB } = logo

    const { optionsList } = head
    const { commomColor, commomPx, commomRadius, commomMargin, commomPadding, commomShadow } = head
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = head
    const { backSize, backColor, backRadio, backIndex, backShadowX, backShadowY, backShadowS, backShadowB } = head
    const { iconSize, iconColor, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = head
    const { toolBack, toolColor, toolFamily, toolWeight, toolStyle, toolSize, toolShadowX, toolShadowY, toolShadowS, toolShadowB } = head

    const { userList, userIsSignOut } = head
    const { trigger, userRoleIsOut, userNameIsOut, userAvatarIsIn, shape, avatarSize } = head
    const { roleColor, roleFamily, roleWeight, roleStyle, roleSize, roleShadowX, roleShadowY, roleShadowS, roleShadowB } = head
    const { nameColor, nameFamily, nameWeight, nameStyle, nameSize, nameShadowX, nameShadowY, nameShadowS, nameShadowB } = head

    const logoImage = {
        margin: `0 ${logoMargin}px`,
        filter: `drop-shadow(${logoShadowX}px ${logoShadowY}px ${logoShadowS}px ${logoShadowB})`
    }

    const backStyle = {
        background: ColorCallBack(commomColor),
        backdropFilter: `blur(${commomPx}px`,
        borderRadius: commomRadius,
        margin: commomMargin,
        padding: commomPadding,
        width: `calc(100% - ${commomMargin * 2}px )`,
        boxShadow: `var(${commomShadow})`,
    }

    const titleStyle = {
        color: fontColor,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontSize: fontSize,
        lineHeight: fontSize + 'px',
        filter: `drop-shadow(${fontShadowX}px ${fontShadowY}px ${fontShadowS}px ${fontShadowB})`
    }

    const optionsBack = {
        background: backColor,
        width: backSize,
        height: backSize,
        borderRadius: backRadio,
        marginLeft: backIndex,
        boxShadow: `${backShadowX}px ${backShadowY}px ${backShadowS}px ${backShadowB}`,
        '--iconSize': iconSize + 'px',
        '--iconColor': iconColor,
        '--iconShadowX': iconShadowX + 'px',
        '--iconShadowY': iconShadowY + 'px',
        '--iconShadowS': iconShadowS + 'px',
        '--iconShadowB': iconShadowB,
    }

    const OptionsToolStyle = {
        '--toolColor': toolColor,
        '--toolFamily': toolFamily,
        '--toolWeight': toolWeight,
        '--toolStyle': toolStyle,
        '--toolSize': toolSize + 'px',
        '--toolShadowX': toolShadowX + 'px',
        '--toolShadowY': toolShadowY + 'px',
        '--toolShadowS': toolShadowS + 'px',
        '--toolShadowB': toolShadowB
    }

    const RoleNameStyle = {
        color: roleColor,
        fontFamily: roleFamily,
        fontWeight: roleWeight,
        fontStyle: roleStyle,
        fontSize: roleSize,
        filter: `drop-shadow(${roleShadowX}px ${roleShadowY}px ${roleShadowS}px ${roleShadowB})`,
        height: roleSize,
        lineHeight: roleSize + 'px'
    }

    const UserNameStyle = {
        color: nameColor,
        fontFamily: nameFamily,
        fontWeight: nameWeight,
        fontStyle: nameStyle,
        fontSize: nameSize,
        filter: `drop-shadow(${nameShadowX}px ${nameShadowY}px ${nameShadowS}px ${nameShadowB})`,
        height: nameSize,
        lineHeight: nameSize + 'px'
    }

    useMount(async () => {
        const user = await GetIndexedDB('user')
        const userAdd = await GetIndexedDB('userAdd')
        setStartStutas(startStutas)
        setUserInfo(user)
        setUserAdd(userAdd)
    })

    const onOptionsFunc = (e) => {
        switch (e) {
            case 1: onNavigate('/Start'); break
            case 7: AdminEvent.emit({ type: 'openMask' }); break
            case 8: onNavigate('/'); break
            case 9: updateModel({ title: '微信绑定', type: 'WeChatBind', width: 480 }); break
            case 10: updateModel({ title: '公众号绑定', type: 'CommonModel', width: 480, data: { type: 'WeChatBind' } }); break
            case 11: updateModel({ title: '主题仓库', type: 'SetUserTheme', width: 800 }); break
            default: break;
        }
    }

    const onAvatarFunc = (e) => {
        switch (e) {
            case 'SetUserInfo':
                updateDrawer({ title: '用户设置', type: 'SetUserInfo', width: 640 })
                break;
            case 'Workbenches':
                if (pageList.findIndex(v => v.key === 'Workbenches') === -1) updateList([...pageList, PageMapping[e]])
                updateActive(e)
                break
            default:
                break;
        }
    }

    return (
        <div className='HeadTemplate' style={backStyle}>
            {template === 'ThemeA02' && <img src={imageUrl + switchUrl} alt="" style={logoImage} />}
            <div className='Title' style={titleStyle}>{UserInfo.subTitle || title}</div>
            <div className='userBox'>
                <div className='options'>
                    {optionsList.map(key => {
                        const item = MappingData.Theme__HeadOptions.find(v => v.value === key)
                        return (
                            <Tooltip key={key} classNames={{ root: 'Admin__Head__Options' }} styles={{ root: OptionsToolStyle }} title={item.label} placement="bottom" color={toolBack}>
                                <div className='icon' style={optionsBack} onClick={() => onOptionsFunc(key)}>{item.icon}</div>
                            </Tooltip>
                        )
                    })}
                </div>
                <Dropdown
                    trigger={[trigger]}
                    popupRender={() => {
                        return (
                            <div className='HeadA01__UserInfo'>
                                <div className='UserInfo'>
                                    {userAvatarIsIn && <Avatar shape={shape} size={avatarSize} src={UserAvatar[UserAdd?.avatar]} />}
                                    <div>
                                        {/* <div style={RoleNameStyle}>{UserInfo.roleName}</div> */}
                                        <div style={UserNameStyle}>{UserInfo.userName}</div>
                                    </div>
                                </div>
                                {userList.length !== 0 &&
                                    <div className='Options'>
                                        {userList.map(key => {
                                            const item = MappingData.Theme__UserOptions.find(v => v.value === key)
                                            return <div className='Downnav' key={key} onClick={() => onAvatarFunc(key)}>{item.label}</div>
                                        })}
                                    </div>
                                }
                                {userIsSignOut &&
                                    <div className='SignOut'>
                                        <Button type='primary' danger onClick={() => onNavigate('/')}>退出登录 <LogoutOutlined /></Button>
                                    </div>
                                }
                            </div>
                        )
                    }}
                >
                    <div className='userInfo'>
                        <Avatar shape={shape} size={avatarSize} src={UserAvatar[UserAdd?.avatar]} />
                        <div>
                            {userRoleIsOut && <div className='NameBox' style={RoleNameStyle}>{UserInfo.roleName}</div>}
                            {userNameIsOut && <div className='NameBox' style={UserNameStyle}>{UserInfo.userName}</div>}
                        </div>
                    </div>
                </Dropdown>
            </div>
        </div>
    );
};

export default HeadTemplate;